<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-date"></i> 图表</el-breadcrumb-item>
                <el-breadcrumb-item>统计</el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <!--<div class="echarts">-->
            <!--<IEcharts :option="line" ></IEcharts>-->
        <!--</div>-->
        <div class="echarts"  >
            <IEcharts :option="bar" id="chart1"></IEcharts>
        </div>
        <!--<div class="echarts">-->
            <!--<IEcharts :option="pie" ></IEcharts>-->
        <!--</div>-->
        <!--<div class="echarts">-->
            <!--<IEcharts :option="pie_radius" ></IEcharts>-->
        <!--</div>-->
    </div>
</template>

<script>
    import IEcharts from 'vue-echarts-v3';
    export default {
        components: {
            IEcharts
        },
        data() {
            return {
                line: {
                    color:["#20a0ff","#13CE66","#F7BA2A","#FF4949"],
                    title: {
                        text: '曲线图'
                    },
                    xAxis: {
                        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
                    },
                    yAxis:{},
                    series: [
                        {
                            name: "销量",
                            type: "line",
                            data: [5, 20, 36, 10, 10, 20]
                        }
                    ]
                },
                bar: {

                    color:["#20a0ff","#13CE66","#F7BA2A","#FF4949"],
                    title: {
                        text: '用户'
                    },
                    xAxis: {
                        data: ["已关注", "已取关", "已绑定手机", "未绑定手机"]
                    },
                    yAxis:{},
                    series: [
                        {
                            name: "数量",
                            type: "bar",
                            data: [1,2,3,4]
                        }
                    ]
                },
                pie: {
                    color:["#20a0ff","#13CE66","#F7BA2A","#FF4949","#61a0a8"],
                    title : {
                        text: '用户',
                        x:'center'
                    },
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: ["未绑定手机", "已绑定手机"]
                    },
                    series : [
                        {
                            name: '数量', //块说明
                            type: 'pie',
                            radius : '55%',//半径
                            center: ['50%', '50%'],//中心
                            data:[
                                {value:335, name:'未绑定手机'},
                                {value:310, name:'已绑定手机'}
                            ],
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                },
                //yo
                pie_radius:{
                    color:["#20a0ff","#13CE66","#F7BA2A","#FF4949","#61a0a8"],
                    title : {
                        text: '环形图',
                        x:'center'
                    },
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋"]
                    },
                    series : [
                        {
                            name: '销量',
                            type: 'pie',
                            radius : ['40%','60%'],
                            data:[
                                {value:335, name:'衬衫'},
                                {value:310, name:'羊毛衫'},
                                {value:234, name:'雪纺衫'},
                                {value:135, name:'裤子'},
                                {value:548, name:'高跟鞋'}
                            ],
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                }
            }
        },
//        data: () => ({
//            focus:0,
//            unfucus:0,
//            total:0,
//            bind:0,
//            unbind:0,
//
//        }),
        methods:{
            loadChart1(){
                let self = this;
                let chart1 = document.querySelector("#chart1");
                self.$req.get(self.$api("Chart")+"1",self,function(res){

                     let data = res.data.data;
                     data.unfollow = data.total-data.follow;
                     data.unbind = data.total-data.bind;
                     self.bar.title.text = "用户("+data.total+")";
                    self.bar.series[0].data=[data.follow,data.unfollow,data.bind,data.unbind];
                },null,false,chart1)
            }
        },

        mounted:function(){
            this.loadChart1();
        }


    }
</script>

<style scoped>
    .echarts {
        float: left;
        width: 500px;
        height: 400px;
    }
</style>